<template>
  <div class="third">
    <mt-header>
      <mt-button icon="back" slot="back"></mt-button>
    </mt-header>
    <div class="thirdContent">
        <div class="thirdLogo">
            <img :src="logo" alt="">
            <p>{{name}}</p>
        </div>
        <div class="thirdInfo">
            <div class="thirdUser">
                <img :src="logo" alt="">
                <span>西红柿(6666666)</span>
            </div>
            <p>使用QQ账号授权并登录</p>
            <p><span></span>访问你的腾讯微博资料</p>
            <p><span></span>分享内容到腾讯微博</p>
            <p><span></span>访问你的基础资料</p>
        </div>
        <mt-button type="primary" class="btnSubmit" @click="submit">授权登录</mt-button>
    </div>
  </div>
</template>

<script>
import MtHeader from '@/components/MtHeader.vue';
export default {
  data() {
    return {
        logo: '',
        name: '',
        thirdApps: [
        {
          thirdId: 10000,
          name: '微信',
          logo: require("@/assets/images/login/WeChat.png"),//logo图片
        },
        {
          thirdId: 10001,
          name: '微博',
          logo: require("@/assets/images/login/WeiBo.png"),//logo图片
        },
        {
          thirdId: 10002,
          name: 'QQ',
          logo: require("@/assets/images/login/QQ.png"),//logo图片
        }
      ]
    };
  },

  //计算属性，会监听依赖属性值随之变化
  computed: {},

  //状态监听
  watch: {},

  //过滤器
  filters: {},

  //方法
  methods: {
      submit() {
          this.$router.push("/bind");
      },
      thirdApp(){
          //console.log(this.$route.params.id);
          var id = this.$route.params.id; //获取URL id
          if(id == 10000){
              //平台数据需从服务器获取
              let thirdApps = this.thirdApps[0];
              this.$route.meta.title = this.name = thirdApps.name;
              this.logo = thirdApps.logo;
              //console.log(this.$route.params.id);
          }else if(id == 10001){
              let thirdApps = this.thirdApps[1];
              this.$route.meta.title = this.name = thirdApps.name;
              this.logo = thirdApps.logo;
          }else if(id ==10002){
              let thirdApps = this.thirdApps[2];
              this.$route.meta.title = this.name = thirdApps.name;
              this.logo = thirdApps.logo;
          }
      }
  },

  //组件
  components: {MtHeader},

  //生命周期 - 实例完成
  created() {
      this.thirdApp();
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
    .thirdContent{
        margin: 0 20px;
        .thirdLogo{
            height: 150px;
            text-align: center;
            img{
                width: 110px;
                height: 110px;
                margin-top: 16px;
            }
            p{
                margin: 0;
            }
        }
        .thirdInfo{
            margin: 20px 0 0;
            .thirdUser{
                display: flex;
                img{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    margin-right: 10px;
                }
                span {
                    display: inline-block;
                    flex: 1;
                    line-height: 50px;
                }
            }
            p{
                margin-left: 40px;
                font-size: 14px;
                span{
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    vertical-align: middle;
                    border: 1px solid black;
                    margin-right: 10px;
                }
            }
        }
        .btnSubmit {
            width: 100%;
            margin-top: 30px;
        }
    }
</style>
